<template>
	<image :src="theme?.bg?.login" mode="widthFix" class="img-top"></image>
	<NavBar :obj="{ title: '注册', color: '#fff', backgroundColor: 'transparent' }" :scrollTop="scrollTop" />
	<view class="fill">
		<view class="middle">
			<view class="card">
				<view class="item" v-for="(item, index) in fieldsToValidate" :key="index">
					<view class="label">{{ item.label }}</view>

					<up-radio-group v-model="formRef.position" placement="row" v-if="item.type == 'radio'">
						<up-radio :activeColor="theme.themeColor" label="左区" name="1" size="35rpx"></up-radio>
						<up-radio :activeColor="theme.themeColor" label="右区" name="2" size="35rpx"></up-radio>
					</up-radio-group>

					<input
						:type="item.type"
						:password="item.type == 'password' ? true : false"
						class="inp"
						placeholder-class="place-inp"
						:placeholder="'请填写' + item.label"
						v-model="formRef[item.key]"
						:disabled="item.lock ? lock : false"
						v-else
					/>
				</view>
				<view class="agree flex items-center">
					<up-checkbox :activeColor="theme.themeColor" label="我已阅读并同意" name="agree" usedAlone v-model:checked="formRef.agree"></up-checkbox>
					<view class="agree-val" @click="goUrl('/pages/agreement?type=register_msg&title=用户注册协议')">《用户注册协议》</view>
				</view>
			</view>
			<view class="tm-btn" @click="register">注册</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick, inject } from 'vue';
	import { port, goBack, goUrl, goIndex, hint, loading, closeLoading } from '/service/port';
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();

	const scrollTop = ref(0);

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	const info = ref({});
	const formRef = ref({
		nickname: '',
		mobile: '',
		password: '',
		pay_password: '',
		parent_code: '',
		shop_code: '',
		position: '1',
		agree: 0
	});
	// 验证规则数组
	const fieldsToValidate = [
		// { key: 'code', label: '会员编号', type: 'nickname' },
		{ key: 'nickname', label: '昵称', type: 'nickname' },
		{ key: 'mobile', label: '手机号码', type: 'tel' },
		{ key: 'password', label: '登录密码', type: 'password' },
		{ key: 'pay_password', label: '支付密码', type: 'password' },
		{ key: 'parent_code', label: '邀请码', type: 'text', lock: true },
		{ key: 'node_code', label: '安置人', type: 'text' },
		{ key: 'position', label: '安置位置', type: 'radio' }
	];

	const lock = ref(false);
	onLoad((e) => {
		if (e.parent_code) {
			formRef.value.parent_code = e.parent_code;
			lock.value = true;
		}

		const scene = decodeURIComponent(e.scene || '');
		if (scene) {
			formRef.value.parent_code = scene;
			lock.value = true;
		}
	});

	// 统一验证方法
	const validateForm = () => {
		for (const field of fieldsToValidate) {
			if (!formRef.value[field.key]?.trim()) {
				hint(`请填写${field.label}`);
				return false;
			}
		}

		if (!formRef.value.agree) {
			hint('请阅读并同意《用户注册协议》');
			return false;
		}

		if (!/^1[3-9]\d{9}$/.test(formRef.value.mobile)) {
			hint('手机号格式不正确');
			return false;
		}

		return true;
	};

	async function register() {
		if (!validateForm()) return;
		loading();
		let res = await port('register', formRef.value);

		setTimeout(() => {
			closeLoading();
			hint(res.msg);
			if (res.url == '/pages/login') {
				goIndex(res.url);
			} else {
				location.href = res.url;
			}
		}, 300);
	}
</script>

<style scoped lang="scss">
	.img-top {
		width: 100%;
		height: 614rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.agree {
		margin-left: 15rpx;
		.agree-val {
			font-weight: 400;
			font-size: 26rpx;
			color: #f79904;
		}
	}
	.fill {
		position: relative;
		// padding-top: 70rpx;
		margin: 0 30rpx;
		padding-bottom: 100rpx;
		.middle {
			background: #ffffff;
			border-radius: 30rpx;
			margin-top: 30rpx;
			.card {
				padding: 30rpx;
				.item {
					padding-bottom: 35rpx;
					.label {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 20rpx;
						margin-left: 15rpx;
					}
					.inp {
						font-weight: 400;
						font-size: 30rpx;
						color: #000;
						background: #f2f2f2;
						border-radius: 47rpx;
						padding: 20rpx 35rpx;
					}
					.place-inp {
						font-weight: 400;
						font-size: 30rpx;
						color: #cccccc;
					}
				}
			}
			.tm-btn {
				margin-top: 0;
				color: #ffffff;
			}
		}
	}
</style>
